<template>
  <div class="swapper">
    <div class="login-box">
      <h2 class="h2_style">社团后台登陆系统</h2>
      <el-form ref="searchForm" :model="searchForm" :rules="rules">
        <el-form-item prop="username">
          <el-input placeholder="请输入账号" v-model="searchForm.username"
            ><svg-icon
              slot="prefix"
              icon-class="user"
              class="el-input__icon input-icon"
          /></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            show-password
            v-model="searchForm.password"
          >
            <svg-icon
              slot="prefix"
              icon-class="password"
              class="el-input__icon input-icon"
            />
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            placeholder="请输入验证码"

            v-model="searchForm.code"
            style="width: 60%"
          >
            <svg-icon
              slot="prefix"
              icon-class="password"
              class="el-input__icon input-icon"
            />
          </el-input>

          <div class="codeImg">
            <img class="img" :src="codeUrl" @click="getCodeHandler" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="button" @click="onLoginHandler">
            Sign in</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
export default {
  data() {
    return {
      searchForm: {
        username: undefined,

        password: undefined,

        code: undefined,

        uuid: undefined,
      },

      codeUrl: undefined,

      captchaOnOff: true,
      rules:{
        username:[{required:true,message:'请输入账号',trigger: 'blur'}],
        password:[{required:true,message:'请输入密码',trigger: 'blur'}],
        code:[{required:true,message:'请输入验证码',trigger: 'blur'}]
      }

    };
  },

  created() {
    this.getCodeHandler();
    this.onKeydownHandler()
  },

  methods: {
    reset() {
      this.searchForm = {
        username: undefined,

        password: undefined,

        code: undefined,

        uuid: undefined,
      };
    },
    getCodeHandler() {
      getCodeImg().then((res) => {
        console.log(res);

        this.captchaOnOff =
          res.captchaOnOff == undefined ? true : res.captchaOnOff;

        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;

          this.searchForm.uuid = res.uuid;
        }
      });
    },

onLoginHandler(){
this.$refs.searchForm.validate((vaild)=>{
  console.log(vaild)
  if(vaild){
     this.$store.dispatch("Login", this.searchForm).then(()=>{
       this.$router.push('/')
       .catch(()=>{})
     })
     .catch(()=>{

this.$refs.searchForm.resetFields()
      // if(err){
      //   this.$refs['searchForm'].resetFields();
      // }

     })
     .finally(() => {
         this.getCodeHandler();

     this.reset();
       });
  }

})
},
onKeydownHandler(){
  var that=this;
  document.onkeydown=function(e){
    var key=window.event.keyCode;
    if(key==13||key==100){
      console.log(1)
      that.onLoginHandler()
    }
  }
}
    // onLoginHandler() {
    //   this.$store
    //     .dispatch("Login", this.searchForm)
    //     .then(() => {
    //       this.$router
    //         .push({ path: this.redirect })

    //         .catch(() => {});
    //     })
    //     .catch((err)=>{
    //      console.log(err.message)
    //           if(err.message=='验证码错误'){
    //             this.searchForm.code=undefined
    //           }  else {
    //             this.reset()
    //           }
    //     })
    //     .finally(() => {
    //       this.getCodeHandler();

    //       // this.reset();
    //     });
    // },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
}
.swapper {
  height: 100%;
  background-image: url(../../src/assets/images/login-bg.jpg);
  background-repeat: no-repeat center;
  background-size: cover;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
  display: flex;

  justify-content: center;

  align-items: center;
}
.login-box {
  position: absolute;
  width: 410px;
  text-align: center;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px 5px #888888;
}
.h2_style {
  margin-bottom: 20px;
}
.codeImg {
  float: right;
  width: 40%;
}
.img {
  height: 36px;
  width: 140px;
}
.button {
  cursor: pointer;
  width: 100%;
  height: 44px;
  padding: 0;
  border-radius: 6px;
  font-size: 24px;
}
</style>
